@import "../../../../../scss/common/other.scss";

$namespace: mooc;
.#{$namespace}-list {
  //display: inline-block;
  float: left;
  margin: 0;
  width: 240px;
  min-height : 1px;
  padding-right : 10px;
  margin-right : 30px;
  @include box-sizing(border-box)
}
ul.mooc-list-wr {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;

  &.fixed {
    background-color : #FFFFFF;
    position: fixed;
    top : 60px;
    width : 230px;
  }

  li {
    &.#{$namespace}-item {
      margin: 0 1.5em;
      padding: 1.5em 0.3em 1.5em 1em;
      border-bottom: 1px solid #EDF1F2;
      cursor: pointer;
      font-size : 18px;

      &.non-active {
        .#{$namespace}-item-img {
          background: url(../../../../../img/zhua.png) no-repeat 0 0;
        }
        color : #787D82;
      }
      &.active {
        .#{$namespace}-item-img {
          background: url(../../../../../img/zhua_r.png) no-repeat 0 0;
        }
        color: #FE0000;
      }
      &.non-active, &.active {
        .#{$namespace}-item-img {
          background-size: 100% auto;
        }
      }
    }
    .#{$namespace}-item-img {
      margin-right: 1em;
      padding: 1em;
      overflow: hidden;
    }
    .#{$namespace}-item-icon{
      margin-right : 30px;
    }

    .#{$namespace}-angle-right {
      position: relative;
      float: right;
      //right: 0.15em;
    }
  }
}